<template>
  <el-card>

    <div class="announcement-board">
    <div class="header">
      <h1>发布公告</h1>
    </div>
    <form class="announcement-form"  @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="title">公告标题</label>
        <input type="text" id="title" v-model="announcement.Public_title" >
      </div>
      <div class="form-group">
        <label for="content">公告内容</label>
        <textarea id="content" v-model="announcement.Public_content" ></textarea>
      </div>
      <div>
        <label for="operator">发布人:</label>&nbsp;&nbsp;&nbsp;&nbsp;
        {{this.currentAdminName}}
      </div>
      <br/><br/>
      <button type="submit" class="btn-publish">点击发布</button>
    </form>
    <div class="action-buttons">
      <button @click="handleCancel">取消发布</button>
      <button @click="viewHistory">查看历史发布公告</button>
    </div>
  </div>
    </el-card>
</template>

<script>
import { ElMessage } from 'element-plus'
import axios from 'axios';
export default {
  name: 'AnnouncementBoard',
  data() {
    return {
      currentAdminName:'',
      announcement: {
        Public_title: '',
        Public_content: '',
        operator: '',
      }
    };
  },
  methods: {
    handleSubmit() {
      // 验证表单数据是否完整
      if (!this.announcement.Public_title || !this.announcement.Public_content) {
        alert('所有字段都是必填的，请填写完整。');
        return;
      }

      // 发送 POST 请求到后端
      axios.post("http://localhost:8080/public/insert", {
        Public_title: this.announcement.Public_title,
        Public_content: this.announcement.Public_content,
        operator: this.currentAdminName
      },  {headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 设置正确的请求头
      }})
          .then(response => {
            // 检查后端响应以确定操作是否成功
            if(response.data === 1) { // 确保这里的条件匹配后端返回的实际值
              console.log("发布成功");
              ElMessage({
                message: '发布成功!',
                type: 'success',
              })
              this.announcement = {
                Public_title: '',
                Public_content: '',
                operator: '',
              };
              // 这里可以添加其他成功后的操作，比如清空表单、关闭对话框等
            } else {
              console.log("发布失败");
              ElMessage({
                message: '发布失败!',
                type: 'success',
              })
              // 处理添加失败的情况
            }
          })
          .catch(error => {
            if (error.response) {
              // 请求已发出，服务器响应了状态码 2xx 之外的其他状态
              console.error('后端返回错误:', error.response.data);
              console.error('状态码:', error.response.status);
            } else if (error.request) {
              // 请求已发出但没有收到响应
              console.error('请求发出，但没有收到响应');
            } else {
              // 发生了触发请求错误的问题
              console.error('请求错误:', error.message);
            }
            console.error('请求配置:', error.config);
            // 处理错误，例如显示错误信息等
          });
    },
    handleCancel() {
      console.log('取消发布');
      this.announcement = {
        Public_title: '',
        Public_content: '',
        operator: '',
      };
      // 这里添加取消发布公告的逻辑
    },
    viewHistory() {
      console.log('查看历史发布公告');
      this.$router.push({ name: 'announceh' });
      // 这里添加查看历史公告的逻辑
    }
  },
  mounted() {
    this.currentAdminName = localStorage.getItem('adminName')
    console.log(this.currentAdminName)
  }
};
</script>

<style scoped>
.el-card {
  width: 80%; /* 设置卡片宽度为父容器的80% */
  max-width: 800px; /* 设置卡片最大宽度，可根据设计需求调整 */
  margin: 0 auto; /* 使卡片在父容器中水平居中 */
}

.header h1 {
  text-align: center;
  color: #696969;
}

.form-group {
  margin-bottom: 15px;
  color: #696969;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #696969;
}

.form-group input[type="text"] {
  width: 95.5%;        /* 设置输入框宽度为80%，与<textarea>相同 */
  padding: 10px;      /* 内边距，根据需要调整 */
  border-radius: 4px; /* 边框圆角，根据需要调整 */
  border: 1px solid #4169E1; /* 边框颜色，保持与其他输入框一致 */
}


.form-group textarea {
  width: 100%;        /* 输入框宽度为100% */
  height: 150px;      /* 输入框高度固定为150px，根据需要调整 */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #4169E1;

}

/* 将按钮的背景颜色设置为浅蓝色 */
.btn-publish, .action-buttons button {
  background-color: #1E90FF; /* 浅蓝色 */
  color: 	#FFFFFF; /* 文字颜色，根据需要调整 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 20px; /* 内边距 */
  cursor: pointer;
  transition: background-color 0.3s; /* 背景颜色渐变效果 */
}

/* 鼠标悬停时按钮颜色加深，增强交互感 */
.btn-publish:hover, .action-buttons button:hover {
  background-color:	#4169E1; /* 浅蓝色的加深版本 */
}

.action-buttons {
  margin-top: 20px;
  text-align: center;


}

.action-buttons button {
  padding: 8px 15px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  background-color: 	#1E90FF;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-buttons button:hover {
  background-color: 	#4169E1;
}

/* 重置 input 和 textarea 的边框样式 */
.form-group input[type="text"],
.form-group textarea {
  border: 1px solid #4169E1; /* 设置一个统一的边框颜色 */
  outline: none; /* 取消聚焦时的默认轮廓效果 */
}

/* 取消 input 输入框聚焦时的边框变色 */
.form-group input[type="text"]:focus {
  border-color: #4169E1; /* 聚焦时保持相同的边框颜色 */
  box-shadow: none; /* 取消聚焦时的阴影效果 */
}

/* 取消 textarea 文本域聚焦时的边框变色 */
.form-group textarea:focus {
  border-color: #4169E1; /* 聚焦时保持相同的边框颜色 */
  box-shadow: none; /* 取消聚焦时的阴影效果 */
}

</style>